<template>
  <div>
    <van-nav-bar title="黑话词典" left-text="" left-arrow @click-left="fun()" />
    <nav>
      <ul>
        <li>推荐热词</li>
        <li>推荐热词</li>
        <li>推荐热词</li>
      </ul>
    </nav>
    <main>
      <div class="nei" v-for="(v, i) in this.$store.state.qiqi.arr5" :key="i">
        <h1 @click="acd(v)">{{ v.name }}</h1>
        <p style="margin: 15px 0 0 0">
          {{ v.hanyi | abab }}
        </p>
        <p class="iconfont icon-bixin"></p>
        <p class="di">
          <span style="color: #a0d3d2"> {{ v.lei }}</span>
          <span>I {{ v.rong }}</span>
        </p>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/baike");
    },
    acd(v) {
      this.$router.push({
        name: "heihuaxx",
        params: { heihuaxx: v },
      });
    },
  },
  mounted() {
    this.$store.dispatch("HEI_HUA");
  },
  filters: {
    abab(val) {
      if (val.length > 5) {
        return val.substr(0, 29) + "...全部";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.16rem;
}
nav {
  li {
    font-size: 0.12rem;
    width: 0.8rem;
    height: 0.25rem;
    background-color: #64bfbb;
    color: white;
    text-align: center;
    line-height: 0.25rem;
    border-radius: 0.3rem;
    margin-top: 0.15rem;
    margin-left: 0.2rem;
    float: left;
  }
  margin-bottom: 0.6rem;
}
main {
  background-color: #f3f3f3;
  width: 100%;
  padding: 0.1rem;
  display: flex;
  flex-shrink: 1;
  flex-wrap: wrap;
  .nei {
    width: 48%;
    height: 2.35rem;
    background-color: white;
    border-radius: 0.2rem;
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 0.2rem;
    h1 {
      font-size: 0.16rem;
      font-weight: 700;
    }
    p {
      font-size: 0.12rem;
      color: #b6b6b5;
      line-height: 0.22rem;
      span {
        font-size: 0.12rem;
        color: #b6b5b5;
      }
    }
    .iconfont {
      float: right;
    }
    .di {
      border-top: 0.01rem dashed #b6b5b5;
      margin-top: 0.25rem;
      padding-top: 0.06rem;
    }
  }
}
</style>